<template>
  <el-card style="max-width: 100%">
    <!-- <el-button style="float: right; margin: 20px" type="success" plain>解锁</el-button> -->
    <el-table :data="tableData" style="width: 100%">
      <el-table-column fixed type="index" label="序号" width="100" />
      <el-table-column prop="codeid" label="产品编号" width="120" />
      <el-table-column prop="production_processes" label="工序" width="120" />
      <el-table-column prop="produce_type" label="产品类型" width="120" />
      <el-table-column label="锁定时间" width="400">
        <template #default="scope">
          <span
            >{{ moment(scope.row.lock_starttime).format('YYYY-MM-DD HH:mm:ss') }} ———
            {{ moment(scope.row.end_time).format('YYYY-MM-DD HH:mm:ss') }}</span
          >
        </template>
      </el-table-column>
      <el-table-column prop="lock_statues" label="状态" width="120" />
      <el-table-column prop="lock_reason" label="锁定原因" width="120" />
      <el-table-column prop="lock_people" label="锁定人" width="120" />
      <el-table-column prop="createtime" label="操作时间" width="200" />
      <el-table-column fixed="right" label="操作列" min-width="120">
        <template #default="scope">
          <el-button link type="primary" size="small" @click="unlock(scope.row.codeid)">
            解锁
          </el-button>
        </template>
      </el-table-column>
    </el-table>
  </el-card>
</template>

<script lang="ts" setup>
import { ElMessage, ElMessageBox, type FormInstance, type FormRules } from 'element-plus'
import axios from 'axios'
const handleClick = () => {
  console.log('click')
}
import { ref, reactive, onMounted } from 'vue'
import moment from 'moment'
const tableData = ref([])
onMounted(() => {
  getLockData()
})
const getLockData = () => {
  axios.get('http://localhost:9991/api/ysl_lockOrUnlock/GetYsl_Product_Locks').then((res) => {
    tableData.value = res.data
    console.log('tableData=>', tableData.value)
  })
}

const unlock = (codeid: any) => {
  ElMessageBox.confirm('确定要解锁该产品吗？', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  })
    .then(() => {
      // 用户点击确定后执行解锁操作
      axios
        .put('http://localhost:9991/api/ysl_lockOrUnlock/Updateysl_product_lock?codeid=' + codeid)
        .then((res) => {
          if (res.data == 1) {
            ElMessage.success('解锁成功')
            getLockData()
          } else {
            ElMessage.error('解锁失败')
          }
        })
    })
    .catch(() => {
      // 用户点击取消时的操作
      ElMessage.info('已取消解锁')
    })
}
</script>
